<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '230px'
    },
    chartData:{
      type: Object,
      default:{}
    }
  },
  data() {
    return {
      chart: null,
      color:''
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  watch:{
    chartData: {
        deep: true,
        handler(val) {
            this.setOptions(val)
        }
    }
  },
  computed:{
    theme() {
      return this.$store.state.settings.theme?'#fff':'#333';
    }
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
    },
    setOptions(data) {
      //this.chart = echarts.init(this.$el, 'macarons');
      var color=this.theme;
      
      this.chart.setOption({
         grid: {
            left: '12%',
            top: '5%',
            bottom: '12%',
            right: '8%'
        },
        xAxis: {
            data: data.name,
        axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(255, 129, 109, 0.1)',
                    width: 1 //这里是为了突出显示加上的
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#61afd7',
                    fontSize: 12
                }
            }
        },
        yAxis: [{
                splitNumber: 2,
                axisTick: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255, 129, 109, 0.1)',
                        width: 1 //这里是为了突出显示加上的
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#61afd7'
                    }
                },
                splitArea: {
                    areaStyle: {
                        color: 'rgba(255,255,255,0)'
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(255, 129, 109, 0.1)',
                        width: 0.5,
                        type: 'dashed'
                    }
                }
            }
        ],
        series: [{
            name: 'hill',
            type: 'pictorialBar',
            barCategoryGap: '0%',
            symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
            label: {
                show: true,
                position: 'top',
                distance: 10,
                color: '#08DFFE',
                fontWeight: 'bolder',
                fontSize: 15,
            },
            itemStyle: {
                normal: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                                offset: 0,
                                color: '#9A11FF' //  0%  处的颜色
                            },
                            {
                                offset: 1,
                                color: 'rgba(40, 138, 249, .8)' //  100%  处的颜色
                                // color:'#08DFFE'

                            }
                        ],
                        global: false //  缺省为  false
                    }
                },
                emphasis: {
                    opacity: 1
                }
            },
            data: data.num,
            z: 10
        }]
      })
    }
  }
}
</script>
